<template>
  <!-- 首次设置密码 -->
  <Modal title="密码修改" v-model="modal" mask-closable closable @on-cancel="onClose" width="400">
    <div style="padding: 0 16px">
      <div class="verify">
        <div class="phone">
          <span>{{ isForget ? '如需更改密码，请验证身份' : '如需修改手机号，请联系管理员' }}</span>
          <p v-if="!isForget" style="margin-top: 10px">手机号：{{ phone }}</p>
        </div>
        <Input v-if="isForget" v-model="phone" :maxlength="11" placeholder="请输入手机号" />
        <div class="code">
          <Input v-model="code" :maxlength="6" placeholder="请输入验证码" />
          <p :class="['bg-blue', codeing ? 'disabled' : '']" @click="getCode">{{ verifyText }}</p>
        </div>
      </div>
    </div>
    <template #footer>
      <Button @click="onClose">取消</Button>
      <Button type="primary" @click="onConfirm">提交</Button>
    </template>
  </Modal>
</template>

<script>
  import userMgr from './index.js'
  import dt from '@dt/dt'
  import { userStore } from '@/store/user'
  export default {
    data() {
      return {
        modal: false,
        isForget: false,
        code: '',
        phone: '',
        verifyText: '获取验证码',
        codeing: false,
        timeout: null
      }
    },
    methods: {
      show(isForget) {
        this.code = ''
        this.phone = isForget ? '' : userStore().info.phone
        this.isForget = isForget
        this.modal = true
      },
      onConfirm() {
        if (this.phone.length != 11 || !/^1[3456789]\d{9}$/.test(this.phone)) {
          dt.ui.Message.error('手机号码有误，请核对')
          return
        }
        if (!this.code) {
          dt.ui.Message.error('请输入验证码')
          return
        }
        userMgr
          .updatePwdCode(this.phone, this.code)
          .then((res) => {
            this.modal = false
            this.$emit('success', this.phone)
          })
          .catch((err) => {
            dt.ui.Message.error(err)
          })
      },
      // 获取验证码
      getCode() {
        if (this.codeing) return
        if (!this.phone) return
        if (this.phone.length != 11 || !/^1[3456789]\d{9}$/.test(this.phone)) {
          dt.ui.Message.error('手机号码有误，请核对')
          return
        }
        this.codeing = true
        userMgr
          .code(this.phone)
          .then((res) => this.countdownTime())
          .catch((err) => {
            this.verifyText = '获取验证码'
            this.codeing = false
          })
      },
      // 倒计时2分钟
      countdownTime() {
        let codeTime = 120
        this.verifyText = codeTime + 's后重新获取'
        this.timeout = setInterval(() => {
          codeTime = codeTime - 1
          if (codeTime <= 0) {
            this.verifyText = '再次获取'
            this.codeing = false
            clearInterval(this.timeout)
          } else {
            this.verifyText = codeTime + 's后重新获取'
          }
        }, 1000)
      },
      onClose() {
        this.modal = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .verify {
    div {
      margin-bottom: 16px;
    }
    .phone {
      p {
        color: #333;
      }
      span {
        color: #999;
        font-size: 12px;
      }
    }
    .code {
      display: flex;
      p {
        height: 32px;
        width: 170px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        color: #fff;
        margin-left: 10px;
        cursor: pointer;
      }
      p.disabled {
        cursor: not-allowed;
      }
    }
  }
</style>
